<script setup lang="ts">
import { Ref, ref, onMounted, onBeforeMount, getCurrentInstance, ComponentInternalInstance } from "vue"
import { ArrowDown, Avatar, Operation, QuestionFilled, Grid, RemoveFilled, Tools, User } from '@element-plus/icons'
import dynamicMenu from 'comps/dynamicMenu.vue'
import { MENU } from 'configs/menu'
import { logOut } from 'api/login'
import { BACKGROUND_LIST } from "configs/index"
import { getImageUrl } from "util/util"

// this
const instance: ComponentInternalInstance | null = getCurrentInstance();
let _this: any = instance ? instance.appContext.config.globalProperties : null;

// ref
let collapse: Ref<boolean> = ref(false);
let screenfull: Ref<boolean> = ref(false);
let setBg_visible: Ref<boolean> = ref(false);
let head_visiable: Ref<boolean> = ref(true);
let menu_visiable: Ref<boolean> = ref(true);

// fullScreen
const fullScreen: Function = (): void => {
  if (!screenfull.value) document.documentElement.requestFullscreen();
  else document.exitFullscreen();
  screenfull.value = !screenfull.value
}

// set background
const setBg: Function = (index): void => {
  _this.$store.commit('setBackground', index);
  localStorage.setItem('background', index);
}

// log out
const loginOut: Function = async (): Promise<void> => {

  // Notify the backend to remove the user from pools
  let { data } = await logOut();
  if (data.code === 0) {

    // Remove the items from local storage
    localStorage.removeItem('state');
    localStorage.removeItem('token');

    // Route to the login page
    _this.$router.push({ name: 'login' });

    _this.$message({
      message: data.message,
      type: data.code === 0 ? 'success' : 'error'
    })
    setTimeout(() => {
      _this.$store.commit('setTransition', 'fadeX')
    }, 1000)

  }
}

// redirect to personal center
const goPersonal: Function = (): void => {
  // Route to the personal center page
  _this.$router.push({ name: 'introduction' });
}

// set the visible property of headbar & menu
const setVisible: Function = (): void => {
  head_visiable.value = !head_visiable.value;
  menu_visiable.value = !menu_visiable.value;
}

// collapseMenu
const collapseMenu: Function = (): void  => {
  collapse.value = !collapse.value;
}

// onBeforeMount
onBeforeMount((): void => {
})

// onMounted
onMounted(async (): Promise<void> => {
})

// Exportation
defineExpose({
})
</script>

<template>
  <div id="index">
    <!-- headBar -->
    <transition name="opc" mode="out-in">
      <div class="headBar" v-if="head_visiable">
        <!-- menu adjust -->
        <el-icon class="avatar ml-12" @click="collapseMenu()">
          <Operation />
        </el-icon>
        <div class="flex flex-row justify-center items-center">
          <!-- fullScreen -->
          <svg-icon
            :name="!screenfull ? 'screenfull-active' : 'screenfull-negative'"
            class="icon-base-trans"
            @click="fullScreen()"
          ></svg-icon>
          <!-- setBackground -->
          <svg-icon name="setBackground" class="icon-base-no" @click="setBg_visible = true"></svg-icon>
          <!-- Avatar -->
          <el-dropdown class="dropdown">
            <span class="mr-1">
              <el-icon class="avatar">
                <Avatar />
              </el-icon>
              <el-icon class="white">
                <arrow-down class="arrow" />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goPersonal()">
                  <el-icon class="head-sub-icon">
                    <User style="font-size: 1rem;" />个人中心
                  </el-icon>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <!-- Grid -->
          <el-dropdown class="dropdown">
            <span class="mr-1">
              <el-icon class="grid">
                <grid />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-icon class="head-sub-icon">
                    <Tools style="font-size: 1rem;" />设置
                  </el-icon>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon class="head-sub-icon">
                    <question-filled style="font-size: 1rem;" />关于
                  </el-icon>
                </el-dropdown-item>
                <el-dropdown-item divided @click="loginOut()">
                  <el-icon class="head-sub-icon">
                    <remove-filled style="font-size: 1rem;" />注销
                  </el-icon>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </transition>
    <!-- main content -->
    <div class="main">
      <!-- menu -->
      <transition name="opc" mode="out-in">
        <div class="menu" v-if="menu_visiable">
          <dynamicMenu :collapse="collapse" :menu="MENU"></dynamicMenu>
        </div>
      </transition>
      <!-- routeView -->
      <!-- <transition name="fade" mode="out-in">
        <router-view class="route" :key="_this.$router.currentRoute.value.name"></router-view>
      </transition>-->
      <router-view v-slot="{ Component }" class="route">
        <transition :name="_this.$store.state.transition" mode="out-in">
          <component :is="Component" ref="comps" />
        </transition>
      </router-view>
    </div>

    <!-- dialog -->
    <el-dialog v-model="setBg_visible" title="设置背景" width="40%">
      <el-card class="table">
        <el-table :data="BACKGROUND_LIST" max-height="300px" center>
          <el-table-column label="背景" width="250">
            <template #default="scope">
              <el-image
                style="border-radius: 5px;"
                :src="getImageUrl(scope.row.background)"
                alt="load error"
              />
            </template>
          </el-table-column>
          <el-table-column prop="author" label="作者" />
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button class="setBg" @click="setBg(scope.row.index)">设置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="setBg_visible = false">关闭</el-button>
          <el-button @click="setBg_visible = false" type="primary">自定义背景</el-button>
        </span>
      </template>
    </el-dialog>
    <svg-icon name="show" class="showBtn" @click="setVisible()"></svg-icon>
  </div>
</template>


<style lang="scss" scoped>
@import "styles/mixin.scss";
$headH: 2.5rem;
#index {
  width: 100vw;
  height: 100vh;
  position: relative;
  @include flex-column-center-center;
}
.headBar {
  width: 100vw;
  height: $headH;
  background: rgba(0, 0, 0, 0.4) !important;
  @include flex-row-between-center;
  .affix {
    width: 100vw;
    @include flex-row-between-center;
  }
  .dropdown {
    border: none !important;
  }
  .avatar {
    color: white !important;
    font-size: 1.5rem;
    transition: all ease-in-out 0.2s;
  }
  .avatar:hover {
    cursor: pointer;
    color: rgb(8, 133, 250) !important;
  }
  .grid {
    color: white !important;
    font-size: 1.5rem;
    transition: all ease-in-out 0.2s;
    transform: rotate(0deg);
  }
  .grid:hover {
    cursor: pointer;
    transform: rotate(180deg);
    color: rgb(8, 133, 250) !important;
  }
  .arrow {
    transform: rotateX(0deg);
    transition: all ease-in-out 0.3s;
  }
  .arrow:hover {
    transform: rotateX(-180deg);
    color: rgb(8, 133, 250) !important;
  }
}
.head-sub-icon {
  width: 100% !important;
  @include flex-row-between-center;
  height: 30px;
}
.main {
  width: 100vw;
  height: calc(100vh - $headH);
  @include flex-row-between-center;
  overflow: hidden;
}

.menu {
  height: calc(100vh - $headH) !important;
  background: transparent !important;
}
// .menu::-webkit-scrollbar {
//   width: 4px;
//   height: 10px;
//   background-color: rgba(0, 0, 0, 0.2);
// }
// .menu::-webkit-scrollbar-track {
//   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
//   border-radius: 10px;
// }
// .menu::-webkit-scrollbar-thumb {
//   border-radius: 10px;
//   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
//   background-color: rgba(148, 148, 148, 0.445);
// }
.route {
  transition: all 0.5s;
}

.showBtn {
  position: fixed;
  left: 95.8%;
  width: 5%;
  height: 5%;
  top: 50%;
  font-size: 3rem;
  border-radius: 50%;
  transform: translateX(35%) rotateZ(0deg);
  transition: all 0.6s;
}
.showBtn:hover {
  transform: translateX(0%) rotateZ(360deg);
  cursor: pointer;
}
</style>
